<script setup>
import { ref, onMounted, nextTick, onUnmounted } from 'vue';
import { ElDialog, ElSlider, ElTimeline, ElTimelineItem } from 'element-plus';
import { debounce } from 'lodash-es';
import * as echarts from 'echarts';

// 常量配置
const MIN_YEAR = 2020;
const MAX_YEAR = 2024;

// 响应式数据
const barChart = ref(null);
const pieChart = ref(null);
const selectedYear = ref(MAX_YEAR);
const dialogVisible = ref(false);
const selectedProvince = ref('');
let chartInstance = null;
let pieInstance = null;

// 省份历史数据（完整展开）
const provinceHistory = {
  '北京': [
    { year: 2020, rate: 87.36, event: '科技创新能力显著提升，高技术产业快速发展' },
    { year: 2021, rate: 88.5, event: '数字经济成为新增长点，科技研发投入持续增加' },
    { year: 2022, rate: 89.7, event: '京津冀协同发展深入推进，产业升级加速' },
    { year: 2023, rate: 90.8, event: '科技创新策源能力提升，基础研究投入占比增加' },
    { year: 2024, rate: 92.0, event: '全球数字经济标杆城市建设取得新进展，创新生态不断完善' }
  ],
  '上海': [
    { year: 2020, rate: 77.58, event: '金融与科技融合发展，高端制造业升级' },
    { year: 2021, rate: 78.8, event: '科技创新投入持续增加，新兴产业集群形成' },
    { year: 2022, rate: 80.0, event: '数字经济与实体经济深度融合，产业数字化转型加速' },
    { year: 2023, rate: 81.2, event: '科技创新能力进一步提升，全球影响力增强' },
    { year: 2024, rate: 82.5, event: 'GDP增长稳定，产业结构持续优化，科技创新引领高质量发展' }
  ],
  '广东': [
    { year: 2020, rate: 98.5, event: '科技研发投入加大，新兴产业蓬勃发展' },
    { year: 2021, rate: 100.2, event: '制造业数字化转型加速，科技创新能力提升' },
    { year: 2022, rate: 102.0, event: 'GDP突破13万亿元，区域创新能力连续8年居全国首位' },
    { year: 2023, rate: 103.8, event: '数字经济与实体经济深度融合，产业升级加速' },
    { year: 2024, rate: 105.6, event: '科技创新强基行动实施，未来产业布局加速推进' }
  ],
  '江苏': [
    { year: 2020, rate: 95.3, event: '制造业集群化发展，高新技术产业增长' },
    { year: 2021, rate: 96.7, event: '数字经济崛起，科技创新生态不断完善' },
    { year: 2022, rate: 98.1, event: '先进制造业规模壮大，高新技术产业产值占比提升' },
    { year: 2023, rate: 99.5, event: '科技创新投入持续增加，产业数字化转型加速' },
    { year: 2024, rate: 100.8, event: '区域创新能力超过北京，位居全国第二' }
  ],
  '浙江': [
    { year: 2020, rate: 94.0, event: '数字经济核心产业快速发展，民营经济活力激发' },
    { year: 2021, rate: 95.5, event: '科技创新生态不断完善，高端装备制造产业崛起' },
    { year: 2022, rate: 97.0, event: '数字经济与实体经济深度融合，产业升级加速' },
    { year: 2023, rate: 98.5, event: '科技创新投入持续增加，区域创新能力位居全国前列' },
    { year: 2024, rate: 100.0, event: '科技创新引领高质量发展，数字经济成为新增长点' }
  ],
  '山东': [
    { year: 2020, rate: 87.0, event: '新旧动能转换初见成效，海洋经济成为新亮点' },
    { year: 2021, rate: 88.5, event: '高端制造业发展加速，科技创新投入持续增加' },
    { year: 2022, rate: 90.0, event: '数字经济与传统产业融合加速，产业结构优化' },
    { year: 2023, rate: 91.5, event: '科技创新能力提升，新兴产业占比提高' },
    { year: 2024, rate: 93.0, event: 'GDP突破10万亿元，区域创新能力位居全国前列' }
  ],
  '湖北': [
    { year: 2020, rate: 85.6, event: '疫情后经济复苏启动，工业经济逐步回暖' },
    { year: 2021, rate: 87.3, event: '新兴产业加速发展，科技创新投入增加' },
    { year: 2022, rate: 89.0, event: '数字经济与传统产业融合加速，产业升级加速' },
    { year: 2023, rate: 90.7, event: '科技创新能力提升，区域创新能力位居全国前十' },
    { year: 2024, rate: 92.4, event: '规模以上工业增加值增长显著，新兴产业贡献突出' }
  ],
  '湖南': [
    { year: 2020, rate: 85.0, event: '装备制造产业加速升级，新材料产业成为新增长点' },
    { year: 2021, rate: 86.5, event: '数字经济与传统产业融合加速，科技创新投入持续增加' },
    { year: 2022, rate: 88.0, event: '科技创新能力提升，区域创新能力位居全国前十' },
    { year: 2023, rate: 89.5, event: 'GDP增长稳定，新兴产业贡献显著' },
    { year: 2024, rate: 91.0, event: '产业结构持续优化，数字经济成为新增长点' }
  ],
  '四川': [
    { year: 2020, rate: 86.0, event: '电子信息产业成为支柱，航空航天产业快速发展' },
    { year: 2021, rate: 87.5, event: '数字经济与传统产业融合加速，科技创新投入持续增加' },
    { year: 2022, rate: 89.0, event: 'GDP突破7万亿元，新兴产业占比提升' },
    { year: 2023, rate: 90.5, event: '科技创新能力提升，区域创新能力位居全国前十' },
    { year: 2024, rate: 92.0, event: '产业结构持续优化，数字经济成为新增长点' }
  ],
  '河南': [
    { year: 2020, rate: 84.0, event: '制造业转型升级加速，农业现代化水平提升' },
    { year: 2021, rate: 85.5, event: '数字经济与传统产业融合加速，科技创新投入持续增加' },
    { year: 2022, rate: 87.0, event: 'GDP增长稳定，产业结构优化' },
    { year: 2023, rate: 88.5, event: '科技创新能力提升，新兴产业贡献显著' },
    { year: 2024, rate: 90.0, event: '产业结构持续优化，数字经济成为新增长点' }
  ],
  '福建': [
    { year: 2020, rate: 90.0, event: '数字经济与海洋经济快速发展，高端制造业发展加速' },
    { year: 2021, rate: 91.5, event: '科技创新投入持续增加，民营经济活力进一步激发' },
    { year: 2022, rate: 93.0, event: '数字经济与实体经济深度融合，产业升级加速' },
    { year: 2023, rate: 94.5, event: '科技创新能力提升，区域创新能力位居全国前列' },
    { year: 2024, rate: 96.0, event: 'GDP增长稳定，新兴产业贡献显著' }
  ],
  '安徽': [
    { year: 2020, rate: 86.0, event: '科技创新投入加大，新兴产业加速发展' },
    { year: 2021, rate: 87.5, event: '制造业数字化转型加速，科技创新能力提升' },
    { year: 2022, rate: 89.0, event: '数字经济与传统产业融合加速，产业升级加速' },
    { year: 2023, rate: 90.5, event: '科技创新能力提升，区域创新能力位居全国前十' },
    { year: 2024, rate: 92.0, event: 'GDP增长稳定，新兴产业贡献显著' }
  ],
  '江西': [
    { year: 2020, rate: 85.0, event: '电子信息产业快速发展，新能源产业成为新增长点' },
    { year: 2021, rate: 86.5, event: '数字经济与传统产业融合加速，科技创新投入持续增加' },
    { year: 2022, rate: 88.0, event: 'GDP增长稳定，产业结构优化' },
    { year: 2023, rate: 89.5, event: '科技创新能力提升，新兴产业贡献显著' },
    { year: 2024, rate: 91.0, event: '产业结构持续优化，数字经济成为新增长点' }
  ],
  '云南': [
    { year: 2020, rate: 83.0, event: '绿色能源产业发展加速，数字经济成为新增长点' },
    { year: 2021, rate: 84.5, event: '传统产业数字化转型加速，科技创新投入持续增加' },
    { year: 2022, rate: 86.0, event: 'GDP增长稳定，产业结构优化' },
    { year: 2023, rate: 87.5, event: '科技创新能力提升，新兴产业贡献显著' },
    { year: 2024, rate: 89.0, event: '产业结构持续优化，数字经济成为新增长点' }
  ],
  '贵州': [
    { year: 2020, rate: 84.0, event: '大数据产业发展加速，数字经济成为新增长点' },
    { year: 2021, rate: 85.5, event: '传统产业数字化转型加速，科技创新投入持续增加' },
    { year: 2022, rate: 87.0, event: 'GDP增长稳定，产业结构优化' },
    { year: 2023, rate: 88.5, event: '科技创新能力提升，新兴产业贡献显著' },
    { year: 2024, rate: 90.0, event: '产业结构持续优化，数字经济成为新增长点' }
  ],
  '海南': [
    { year: 2020, rate: 81.0, event: '自由贸易港建设加速，旅游业与现代服务业融合发展' },
    { year: 2021, rate: 82.5, event: '数字经济与海洋经济融合加速，科技创新投入持续增加' },
    { year: 2022, rate: 84.0, event: 'GDP增长稳定，产业结构优化' },
    { year: 2023, rate: 85.5, event: '科技创新能力提升，新兴产业贡献显著' },
    { year: 2024, rate: 87.0, event: '产业结构持续优化，数字经济成为新增长点' }
  ],
  '广西': [
    { year: 2020, rate: 82.0, event: '电子信息产业快速发展，数字经济成为新增长点' },
    { year: 2021, rate: 83.5, event: '传统产业数字化转型加速，科技创新投入持续增加' },
    { year: 2022, rate: 85.0, event: 'GDP增长稳定，产业结构优化' },
    { year: 2023, rate: 86.5, event: '科技创新能力提升，新兴产业贡献显著' },
    { year: 2024, rate: 88.0, event: '产业结构持续优化，数字经济成为新增长点' }
  ],
  '陕西': [
    { year: 2020, rate: 85.0, event: '航空航天产业快速发展，电子信息产业成为新增长点' },
    { year: 2021, rate: 86.5, event: '数字经济与传统产业融合加速，科技创新投入持续增加' },
    { year: 2022, rate: 88.0, event: 'GDP增长稳定，产业结构优化' },
    { year: 2023, rate: 89.5, event: '科技创新能力提升，新兴产业贡献显著' },
    { year: 2024, rate: 91.0, event: '产业结构持续优化，数字经济成为新增长点' }
  ],
  '甘肃': [
    { year: 2020, rate: 80.0, event: '新能源产业快速发展，数字经济成为新增长点' },
    { year: 2021, rate: 81.5, event: '传统产业数字化转型加速，科技创新投入持续增加' },
    { year: 2022, rate: 83.0, event: 'GDP增长稳定，产业结构优化' },
    { year: 2023, rate: 84.5, event: '科技创新能力提升，新兴产业贡献显著' },
    { year: 2024, rate: 86.0, event: '产业结构持续优化，数字经济成为新增长点' }
  ],
  '青海': [
    { year: 2020, rate: 79.0, event: '新能源产业快速发展，数字经济成为新增长点' },
    { year: 2021, rate: 80.5, event: '传统产业数字化转型加速，科技创新投入持续增加' },
    { year: 2022, rate: 82.0, event: 'GDP增长稳定，产业结构优化' },
    { year: 2023, rate: 83.5, event: '科技创新能力提升，新兴产业贡献显著' },
    { year: 2024, rate: 85.0, event: '产业结构持续优化，数字经济成为新增长点' }
  ],
  '宁夏': [
    { year: 2020, rate: 78.0, event: '新能源产业快速发展，数字经济成为新增长点' },
    { year: 2021, rate: 79.5, event: '传统产业数字化转型加速，科技创新投入持续增加' },
    { year: 2022, rate: 81.0, event: 'GDP增长稳定，产业结构优化' },
    { year: 2023, rate: 82.5, event: '科技创新能力提升，新兴产业贡献显著' },
    { year: 2024, rate: 84.0, event: '产业结构持续优化，数字经济成为新增长点' }
  ],
  '新疆': [
    { year: 2020, rate: 77.0, event: '能源产业转型升级加速，数字经济成为新增长点' },
    { year: 2021, rate: 78.5, event: '传统产业数字化转型加速，科技创新投入持续增加' },
    { year: 2022, rate: 80.0, event: 'GDP增长稳定，产业结构优化' },
    { year: 2023, rate: 81.5, event: '科技创新能力提升，新兴产业贡献显著' },
    { year: 2024, rate: 83.0, event: '产业结构持续优化，数字经济成为新增长点' }
  ],
  '西藏': [
    { year: 2020, rate: 76.0, event: '清洁能源产业发展加速，数字经济成为新增长点' },
    { year: 2021, rate: 77.5, event: '传统产业数字化转型加速，科技创新投入持续增加' },
    { year: 2022, rate: 79.0, event: 'GDP增长稳定，产业结构优化' },
    { year: 2023, rate: 80.5, event: '科技创新能力提升，新兴产业贡献显著' },
    { year: 2024, rate: 82.0, event: '产业结构持续优化，数字经济成为新增长点' }
  ],
  '辽宁': [
    { year: 2020, rate: 82.0, event: '传统产业转型升级加速，数字经济成为新增长点' },
    { year: 2021, rate: 83.5, event: '科技创新投入持续增加，高端制造业发展加速' },
    { year: 2022, rate: 85.0, event: 'GDP增长稳定，产业结构优化' },
    { year: 2023, rate: 86.5, event: '科技创新能力提升，新兴产业贡献显著' },
    { year: 2024, rate: 88.0, event: '产业结构持续优化，数字经济成为新增长点' }
  ],
  '吉林': [
    { year: 2020, rate: 81.0, event: '汽车产业加速升级，农业现代化水平提升' },
    { year: 2021, rate: 82.5, event: '数字经济与传统产业融合加速，科技创新投入持续增加' },
    { year: 2022, rate: 84.0, event: 'GDP增长稳定，产业结构优化' },
    { year: 2023, rate: 85.5, event: '科技创新能力提升，新兴产业贡献显著' },
    { year: 2024, rate: 87.0, event: '产业结构持续优化，数字经济成为新增长点' }
  ],
  '黑龙江': [
    { year: 2020, rate: 80.0, event: '传统产业转型升级加速，数字经济成为新增长点' },
    { year: 2021, rate: 81.5, event: '科技创新投入持续增加，高端制造业发展加速' },
    { year: 2022, rate: 83.0, event: 'GDP增长稳定，产业结构优化' },
    { year: 2023, rate: 84.5, event: '科技创新能力提升，新兴产业贡献显著' },
    { year: 2024, rate: 86.0, event: '产业结构持续优化，数字经济成为新增长点' }
  ],
  '内蒙古': [
    { year: 2020, rate: 80.0, event: '能源产业转型升级加速，数字经济成为新增长点' },
    { year: 2021, rate: 81.5, event: '传统产业数字化转型加速，科技创新投入持续增加' },
    { year: 2022, rate: 83.0, event: 'GDP增长稳定，产业结构优化' },
    { year: 2023, rate: 84.5, event: '科技创新能力提升，新兴产业贡献显著' },
    { year: 2024, rate: 86.0, event: '产业结构持续优化，数字经济成为新增长点' }
  ],
  '山西': [
    { year: 2020, rate: 82.0, event: '能源转型加速，数字经济起步' },
    { year: 2021, rate: 83.5, event: '传统产业数字化转型加速，科技创新投入持续增加' },
    { year: 2022, rate: 85.0, event: 'GDP增长稳定，产业结构优化' },
    { year: 2023, rate: 86.5, event: '科技创新能力提升，新兴产业贡献显著' },
    { year: 2024, rate: 88.0, event: '产业结构持续优化，数字经济成为新增长点' }
  ],
  '重庆': [
    { year: 2020, rate: 90.0, event: '电子信息产业加速升级，汽车制造业发展加速' },
    { year: 2021, rate: 91.5, event: '数字经济与传统产业融合加速，科技创新投入持续增加' },
    { year: 2022, rate: 93.0, event: 'GDP增长稳定，产业结构优化' },
    { year: 2023, rate: 94.5, event: '科技创新能力提升，新兴产业贡献显著' },
    { year: 2024, rate: 96.0, event: '产业结构持续优化，数字经济成为新增长点' }
  ],
  '天津': [
    { year: 2020, rate: 95.0, event: '高端制造业快速发展，数字经济成为新增长点' },
    { year: 2021, rate: 96.5, event: '传统产业数字化转型加速，科技创新投入持续增加' },
    { year: 2022, rate: 98.0, event: 'GDP增长稳定，产业结构优化' },
    { year: 2023, rate: 99.5, event: '科技创新能力提升，新兴产业贡献显著' },
    { year: 2024, rate: 101.0, event: '产业结构持续优化，数字经济成为新增长点' }
  ],
  '香港': [
    { year: 2020, rate: 98.0, event: '金融与科技融合发展，数字经济成为新增长点' },
    { year: 2021, rate: 99.5, event: '传统产业数字化转型加速，科技创新投入持续增加' },
    { year: 2022, rate: 101.0, event: 'GDP增长稳定，产业结构优化' },
    { year: 2023, rate: 102.5, event: '科技创新能力提升，新兴产业贡献显著' },
    { year: 2024, rate: 104.0, event: '产业结构持续优化，数字经济成为新增长点' }
  ],
  '澳门': [
    { year: 2020, rate: 97.0, event: '旅游业与现代服务业融合发展，数字经济成为新增长点' },
    { year: 2021, rate: 98.5, event: '传统产业数字化转型加速，科技创新投入持续增加' },
    { year: 2022, rate: 100.0, event: 'GDP增长稳定，产业结构优化' },
    { year: 2023, rate: 101.5, event: '科技创新能力提升，新兴产业贡献显著' },
    { year: 2024, rate: 103.0, event: '产业结构持续优化，数字经济成为新增长点' }
  ],
  '台湾': [
    { year: 2020, rate: 99.0, event: '半导体产业全球领先，数字经济成为新增长点' },
    { year: 2021, rate: 100.5, event: '传统产业数字化转型加速，科技创新投入持续增加' },
    { year: 2022, rate: 102.0, event: 'GDP增长稳定，产业结构优化' },
    { year: 2023, rate: 103.5, event: '科技创新能力提升，新兴产业贡献显著' },
    { year: 2024, rate: 105.0, event: '产业结构持续优化，数字经济成为新增长点' }
  ]
};

// 生成模拟数据（完整实现）
const generateMockData = (year) => {
  const allProvinces = Object.keys(provinceHistory);
  return allProvinces.reduce((acc, province) => {
    const history = provinceHistory[province].find(h => h.year === year);
    acc[province] = history ? history.rate : (80 + Math.random() * 15);
    return acc;
  }, {});
};

// 获取职业数据（完整实现）
const getOccupationData = (province) => {
  const baseData = [
    { value: 35, name: '技术开发' },
    { value: 25, name: '金融财务' },
    { value: 15, name: '教育培训' },
    { value: 10, name: '医疗卫生' },
    { value: 5, name: '行政管理' },
    { value: 4, name: '销售营销' },
    { value: 3, name: '文化创意' },
    { value: 3, name: '其他职业' }
  ];
  
  if (province === '北京') {
    return baseData.map(item => ({
      ...item,
      value: item.name === '技术开发' ? 45 : item.name === '行政管理' ? 10 : item.value
    }));
  }
  
  if (province === '上海') {
    return baseData.map(item => ({
      ...item,
      value: item.name === '金融财务' ? 35 : item.value
    }));
  }
  
  return baseData;
};

// 颜色生成函数（完整实现）
const getColorForValue = (value) => {
  const colorMap = {
    '95+': '#4dd2ff' ,
    '90+': '#66d9ff',
    '85+': '#80dfff',
    '80+': '#99e6ff',
    default: '#a8c0ff'
  };
  return value >= 95 ? colorMap['95+'] :
         value >= 90 ? colorMap['90+'] :
         value >= 85 ? colorMap['85+'] :
         value >= 80 ? colorMap['80+'] : colorMap.default;
};

// 饼图颜色（完整实现）
const getPieColor = (name) => {
  const colors = {
    '技术开发': '#3498db',
    '金融财务': '#2ecc71',
    '教育培训': '#f39c12',
    '医疗卫生': '#e74c3c',
    '行政管理': '#9b59b6',
    '销售营销': '#1abc9c',
    '文化创意': '#d35400',
    '其他职业': '#95a5a6'
  };
  return colors[name] || '#bdc3c7';
};

// 图表实例初始化（完整实现）
const initChartInstance = (chartRef, existingInstance) => {
  if (!chartRef.value) return null;
  if (existingInstance) existingInstance.dispose();
  return echarts.init(chartRef.value);
};

// 初始化柱状图（完整配置）
const initBarChart = () => {
  chartInstance = initChartInstance(barChart, chartInstance);
  if (!chartInstance) return;

  const data = generateMockData(selectedYear.value);
  const sortedData = Object.entries(data)
    .sort((a, b) => b[1] - a[1])
    .map(([name, value]) => ({ name, value }));

  const option = {
    title: {
      text: `${selectedYear.value}年各省就业率排行-点击省份查看应届生在八大类职业的就业详情`,
      left: 'center',
      textStyle: {
        color: '#2c3e50',
        fontSize: 18,
        fontWeight: 'bold'
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' },
      formatter: params => `
        <div style="font-weight:bold">${params[0].name}</div>
        <div>就业率: ${params[0].value}%</div>
        <div>点击查看详情</div>
      `,
      backgroundColor: 'rgba(255,255,255,0.95)',
      borderColor: '#ddd',
      borderWidth: 1,
      padding: 10,
      textStyle: { color: '#333' }
    },
    grid: {
      left: '15%',
      right: '5%',
      bottom: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      axisLabel: {
        formatter: '{value}%',
        color: '#666'
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: '#eee'
        }
      }
    },
    yAxis: {
      type: 'category',
      data: sortedData.map(item => item.name),
      axisTick: { show: false },
      axisLabel: {
        color: '#666',
        fontSize: 14,
        interval: 0,
        margin: 10      // 增加标签间距
      },
      axisLine: { show: false }
    },
    series: [{
      name: '就业率',
      type: 'bar',
      data: sortedData,
      itemStyle: {
        color: params => getColorForValue(params.value),
        borderRadius: [0, 5, 5, 0],
        shadowColor: 'rgba(0, 0, 0, 0.1)',
        shadowBlur: 5,
        shadowOffsetX: 2
      },
      label: {
        show: true,
        position: 'right',
        formatter: '{c}%',
        color: '#666',
        fontSize: 12
      },
      emphasis: {
        itemStyle: {
          shadowColor: 'rgba(0, 0, 0, 0.2)',
          shadowBlur: 10
        }
      }
    }],
    animationDuration: 1000
  };

  chartInstance.setOption(option);
  chartInstance.on('click', handleBarClick);
};

// 初始化饼图（完整配置）
const initPieChart = () => {
  pieInstance = initChartInstance(pieChart, pieInstance);
  if (!pieInstance) return;

  const data = getOccupationData(selectedProvince.value);
  
  const option = {
    title: {
      text: `${selectedProvince.value} 应届生职业分布`,
      left: 'center',
      textStyle: {
        color: '#2c3e50',
        fontSize: 16,
        fontWeight: 'bold'
      },
      subtext: '数据来源: 国家统计局',
      subtextStyle: {
        color: '#7f8c8d',
        fontSize: 12
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c}%',
      backgroundColor: 'rgba(255,255,255,0.95)',
      borderColor: '#ddd',
      borderWidth: 1
    },
    legend: {
      orient: 'vertical',
      right: 10,
      top: 'center',
      textStyle: { color: '#666' }
    },
    series: [{
      name: '职业分布',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 6,
        borderColor: '#fff',
        borderWidth: 2,
        shadowColor: 'rgba(0, 0, 0, 0.1)',
        shadowBlur: 5,
        shadowOffsetX: 2,
        shadowOffsetY: 2
      },
      label: {
        show: false,
        position: 'center',
        formatter: '{b}\n{c}%',
        fontWeight: 'bold',
        fontSize: 14,
        color: '#2c3e50'
      },
      emphasis: {
        label: { 
          show: true, 
          fontSize: 18,
          color: '#2c3e50'
        },
        itemStyle: {
          shadowColor: 'rgba(0, 0, 0, 0.2)',
          shadowBlur: 10
        }
      },
      labelLine: { show: false },
      data: data.map(item => ({
        ...item,
        itemStyle: { color: getPieColor(item.name) }
      })),
      animationType: 'scale',
      animationEasing: 'elasticOut',
      animationDelay: () => Math.random() * 200
    }]
  };

  pieInstance.setOption(option);
};

// 事件处理（完整实现）
const handleBarClick = (params) => {
  if (params.componentType === 'series') {
    selectedProvince.value = params.name;
    dialogVisible.value = true;
    nextTick(() => {
      initPieChart();
    });
  }
};

const handleYearChange = debounce(() => {
  initBarChart();
}, 300);

const handleResize = debounce(() => {
  chartInstance?.resize();
  pieInstance?.resize();
}, 300);

// 生命周期钩子
onMounted(() => {
  initBarChart();
  window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
  chartInstance?.dispose();
  pieInstance?.dispose();
  window.removeEventListener('resize', handleResize);
});
</script>

<template>
  <div class="employment-chart">
    <!-- 年份选择器 -->
    <div class="year-selector">
      <div class="slider-title">{{ selectedYear }}年就业数据</div>
      <el-slider
        v-model="selectedYear"
        :min="MIN_YEAR"
        :max="MAX_YEAR"
        :step="1"
        show-input
        :marks="{
          2020: '2020',
          2021: '2021',
          2022: '2022',
          2023: '2023',
          2024: '2024'
        }"
        @change="handleYearChange"
      />
    </div>

    <!-- 柱状图容器 -->
    <div ref="barChart" class="bar-chart-container"></div>

    <!-- 省份详情弹窗 -->
    <el-dialog
      v-model="dialogVisible"
      :title="`${selectedProvince}就业详情`"
      width="70%"
      top="5vh"
      class="province-dialog"
    >
      <div class="dialog-content">
        <div ref="pieChart" class="pie-chart"></div>
        
        <div class="timeline-section" v-if="provinceHistory[selectedProvince]">
          <h3>{{ selectedProvince }}核心就业率历史变化</h3>
          <el-timeline>
            <el-timeline-item
              v-for="item in provinceHistory[selectedProvince]"
              :key="item.year"
              :timestamp="`${item.year}年`"
              placement="top"
            >
              <el-card shadow="hover">
                <h4>就业率: {{ item.rate }}%</h4>
                <p>{{ item.event }}</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.employment-chart {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 24px;
  box-sizing: border-box;
  background: linear-gradient(150deg, #f6f9ff 0%, #ebf2ff 100%);
  position: relative;

  .bar-chart-container {
    flex: 1;
    width: 100%;
    min-height: 680px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(38, 132, 255, 0.08);
    padding: 20px;
    margin-top: 24px;
    border: 1px solid rgba(234, 242, 255, 0.8);
  }

  .year-selector {
    width: 82%;
    max-width: 860px;
    margin: 0 auto;
    padding: 20px 28px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(57, 106, 255, 0.06);
    backdrop-filter: blur(4px);
    
    .slider-title {
      font-size: 17px;
      font-weight: 600;
      color: #2c3e50;
      margin-bottom: 14px;
      text-align: center;
      letter-spacing: 0.5px;
    }
    
    :deep(.el-slider) {
      .el-slider__marks-text {
        color: #7f8c8d;
        font-size: 13px;
        transform: translateY(6px);
      }
      
      .el-slider__button {
        width: 18px;
        height: 18px;
        border: 3px solid #4a90e2;
        background: #fff;
        transition: transform 0.2s;
        
        &:hover {
          transform: scale(1.1);
        }
      }
      
      .el-slider__runway {
        background-color: #e9f1ff;
        height: 6px;
        border-radius: 3px;
      }
      
      .el-slider__bar {
        background-color: #4a90e2;
        height: 6px;
        border-radius: 3px;
      }
    }
  }

  .pie-chart {
    height: 420px;
    width: 100%;
    margin-bottom: 28px;
    background: white;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 4px 16px rgba(0, 82, 217, 0.08);
  }
  
  .timeline-section {
    margin-top: 32px;
    padding: 24px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(57, 106, 255, 0.06);
    
    h3 {
      color: #2c3e50;
      margin-bottom: 24px;
      text-align: center;
      font-size: 17px;
      font-weight: 600;
      position: relative;
      padding-bottom: 8px;
      
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
        height: 2px;
        background: #4a90e2;
      }
    }
    
    :deep(.el-timeline) {
      padding-left: 12px;
      
      .el-timeline-item__node {
        background: #4a90e2;
        border-color: rgba(74, 144, 226, 0.2);
      }
      
      .el-timeline-item__timestamp {
        color: #6b7c93;
        font-size: 14px;
        margin-bottom: 6px;
      }
      
      .el-card {
        border: none;
        background-color: #f8fbff;
        transition: transform 0.2s;
        
        &:hover {
          transform: translateX(8px);
        }
        
        h4 {
          color: #2c3e50;
          margin-bottom: 6px;
          font-size: 15px;
          font-weight: 500;
          
          &::before {
            content: '▹';
            color: #4a90e2;
            margin-right: 8px;
          }
        }
        
        p {
          color: #6b7c93;
          font-size: 14px;
          line-height: 1.6;
        }
      }
    }
  }
}

:deep(.province-dialog) {
  .el-dialog {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(234, 242, 255, 0.8);
    
    &__header {
      background: linear-gradient(135deg, #6aa1ff 0%, #4a90e2 100%);
      margin-right: 0;
      padding: 18px 24px;
      
      .el-dialog__title {
        color: white;
        font-weight: 600;
        letter-spacing: 0.5px;
      }
      
      .el-dialog__headerbtn {
        top: 22px;
        
        .el-icon {
          color: rgba(255, 255, 255, 0.9);
          font-size: 20px;
          
          &:hover {
            color: white;
          }
        }
      }
    }
    
    &__body {
      padding: 24px;
      background: #f9faff;
    }
  }
}

@media (max-width: 768px) {
  .employment-chart {
    padding: 16px;
    
    .year-selector {
      width: 100%;
      padding: 16px;
      
      .slider-title {
        font-size: 15px;
      }
    }
    
    .bar-chart-container {
      min-height: 500px;
      padding: 12px;
    }
    
    :deep(.province-dialog) {
      width: 90% !important;
      
      .el-dialog__body {
        padding: 16px;
      }
      
      .pie-chart {
        height: 300px;
      }
    }
    
    .timeline-section {
      padding: 16px;
      
      h3 {
        font-size: 15px;
      }
    }
  }
}
</style>